import React, { Component, Fragment } from "react";
import {
  Menu,
  Icon,
  Dropdown,
  message,
  Form,
  Input,
  Checkbox,
  Button
} from "antd";
import { MODIFY } from "../../src/service/api/AdminApi";
import { inject, observer } from "mobx-react";
import { Link,withRouter } from "react-router-dom";
class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
    autoCompleteResult: []
  };

  render() {
    const { ...props } = this.props;
    let { AdminStore } = this.props;
    console.log(this.props);
    this.handleSubmit = e => {
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    };
    this.handleConfirmBlur = e => {
      const { value } = e.target;
      this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    };
    this.validateToNextPassword = (rule, value, callback) => {
      const { form } = this.props;
      if (value && this.state.confirmDirty) {
        form.validateFields(["confirm"], { force: true });
      }
      callback();
    };
    this.compareToFirstPassword = (rule, value, callback) => {
      const { form } = this.props;
      if (value && value !== form.getFieldValue("password")) {
        callback("Two passwords that you enter is inconsistent!");
      } else {
        callback();
      }
    };
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0
        },
        sm: {
          span: 16,
          offset: 8
        }
      }
    };

    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item hasFeedback>
          {getFieldDecorator("password", {
            rules: [
              { required: true, message: "Please input your username!" },
              {
                validator: this.validateToNextPassword
              }
            ]
          })(
            <div>
              <Input
                prefix={
                  <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                }
                type="password"
                placeholder="密码"
              />
              <div>6-20个字符、包含数字、字母、(区分大小写)、特殊字符</div>
            </div>
          )}
        </Form.Item>
        <Form.Item hasFeedback>
          {getFieldDecorator("passwordConfirm", {
            rules: [
              { required: true, message: "Please input your username!" },
              {
                validator: this.compareToFirstPassword
              }
            ]
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
              type="password"
              placeholder="确认密码"
              onBlur={this.handleConfirmBlur}
            />
          )}
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button
            type="primary"
            className="confirmBtn"
            style={{ width: "173px", height: "44px", marginLeft: "-120px" }}
            htmlType="submit"
          >
            确定
          </Button>
          <Button
            type="primary"
            style={{
              width: "173px",
              height: "44px",
              marginLeft: "10px",
              background: "rgba(184,200,216,1)"
            }}
            onClick={() => {
              this.props.changePasswordDisplay();
            }}
          >
            cancel
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedRegistrationForm = Form.create({ name: "register" })(
  RegistrationForm
);
@inject("AdminStore")
@observer
@withRouter
export default class Navigate extends Component {
  state = {
    current: "product",
    displayModifyPassword: false, //是否显示退出和修改密码
    PasswordDisplay: false, //修改密码弹框是否出现
    show_logout_modify_password: false,
    password: "",
    confirm_password: ""
  };
  handleClick = e => {
    if (e.key === "product") {
      this.props.history.push('/')
      setTimeout(() => {
        window.scrollTo(0, 0);
      }, 100);
    }
  };

  render() {
    this.handleConfirmBlur = e => {
      const { value } = e.target;
      this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    };
    this.validateToNextPassword = (rule, value, callback) => {
      const { form } = this.props;
      if (value && this.state.confirmDirty) {
        form.validateFields(["confirm"], { force: true });
      }
      callback();
    };
    this.compareToFirstPassword = (rule, value, callback) => {
      const { form } = this.props;
      if (value && value !== form.getFieldValue("password")) {
        callback("Two passwords that you enter is inconsistent!");
      } else {
        callback();
      }
    };
    this.changePasswordDisplay = () => {
      //子组件通过这个方法修改父组件state的状态
      this.setState(() => ({
        PasswordDisplay: false
      }));
    };
    this.show_logout_modify_password = show_logout_modify_password => {
      if (show_logout_modify_password) {
        this.setState(() => ({
          show_logout_modify_password: true
        }));
      } else {
        this.setState(() => ({
          show_logout_modify_password: false
        }));
      }
    };
    return (
      <Fragment>
        <Menu
          className="yl-navigate"
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
          mode="horizontal"
        >
          <Menu.Item key="mail">
            <a href="https://www.yunlizhihui.com">首页</a>
          </Menu.Item>
          <Menu.Item key="product">AI应用集市</Menu.Item>
          <Menu.Item key="joinUs">
            <a href="https://www.yunlizhihui.com/#/join"> 加入我们</a>
          </Menu.Item>
          <Menu.Item key="about">
            <a href="https://www.yunlizhihui.com/#/about">关于云粒</a>
          </Menu.Item>
        </Menu>
      </Fragment>
    );
  }

}
